<template>
  <PageWrapper>
    <a-form
      name="basic"
      :model="insideData.data"
      scrollToFirstError
      :label-col="{
        xs: { span: 5 },
        sm: { span: 6 },
        md: { span: 8 },
        lg: { span: 8 },
        xl: { span: 7 },
        xxl: { span: 7 },
      }"
      :wrapper-col="{
        xs: { span: 15 },
        sm: { span: 12 },
        md: { span: 10 },
        lg: { span: 10 },
        xl: { span: 7 },
        xxl: { span: 7 },
      }"
      autocomplete="true"
      layout="horizontal"
    >
      <!-- horizontal vertical inline -->
      <a-card>
        <a-row>
          <a-col span="24">
            <a-form-item label="单据编号" name="data.code" v-bind="validateInfos['data.code']">
              <a-input
                v-model:value="insideData.data.code"
                :size="size"
                disabled
                allowClear
              />
            </a-form-item>
          </a-col>
          <!-- <a-col span="24">
            <a-form-item label="入库人">
              <a-select
                v-model:value="insideData.data.uid"
                :size="size"
                placeholder="请选择"
                :field-names="{label: 'name', value: 'ID',}"
                :options="userListRef"
              />
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="实际业务日期" name="workAt">
              <a-date-picker
                v-model:value="workAtRef"
                inputReadOnly
                :size="size"
                @change="onValidDateChange"
                placeholder=""
                style="width: 100%"
              >
                <template #dateRender="{ current }">
                  <div class="ant-picker-cell-inner">
                    {{ current.date() }}
                  </div>
                </template>
              </a-date-picker>
            </a-form-item>
          </a-col> -->
        </a-row>
        <a-col span="24">
          <a-form-item
            label="单据备注"
            name="memo"
            :wrapper-col="{ span: 12}"
          >
            <a-textarea
              v-model:value="insideData.data.memo"
              :auto-size="{ minRows: 3, maxRows: 5 }"
              showCount
              :disabled="!!isDetail"
              :maxlength="100"
              placeholder="备注一下..."
            />
          </a-form-item>
        </a-col>
        <!-- <a-divider/> -->
        <div style="margin: 0 auto;width: clamp(400px, 100%, 100%);">
          <GoodsOfEditList ref="goodsListRef" :is-detail="!!isDetail" :data-list="insideData.data.goodsList" />
        </div>
        <span style="display: flex; justify-content: center; margin: 2rem 0 8px 0">
        <a-space :size="size">
          <a-button size="large" type="default" shape="round" @click="gotoListPage">
            <template #icon><ArrowLeftOutlined/></template>
            返回
          </a-button>
          <a-button v-if="!isDetail" size="large" type="primary" shape="round" @click="onSubmit">
            <template #icon><CheckOutlined/></template>
            提交移库
          </a-button>
        </a-space>
        <!-- <VxeButton
          status="default"
          icon="vxe-icon-close"
          content="关闭页面"
          @click="closeCurrent"
        /> -->
      </span>
      </a-card>
    </a-form>
  </PageWrapper>
</template>
<script lang="ts" name="TabOfMove" setup>
// import { Card, Col, DatePicker, Form, FormItem, Row } from 'ant-design-vue';
import { ArrowLeftOutlined, CheckOutlined } from "@ant-design/icons-vue";
import { Form } from 'ant-design-vue';
import 'dayjs/locale/zh-cn';
import { reactive, ref, watchPostEffect } from 'vue';
import { useRoute } from 'vue-router';
import GoodsOfEditList from './GoodsOfEditList.vue';
// import { UserInfoModel, getListData as getUserListData } from '/@/api/sys/user';
import { create, getByCode, update } from "/@/api/wms/bill-move";
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useGo } from '/@/hooks/web/usePage';
import { useTabs } from '/@/hooks/web/useTabs';
import { useUserStore } from '/@/store/modules/user';
import { getCode } from "/@/utils/my";
  const userStore = useUserStore();

  const route = useRoute();
  const { setTitle, closeCurrent } = useTabs();
  const { code, isDetail, history } = route.params;
  if (code) {
    setTitle('编辑 - 移库单');
  } else {
    setTitle('创建 - 移库单');
  }
  if (isDetail) {
    setTitle('移库单详情');
  }

  const go = useGo();
  const gotoListPage = () => {
    closeCurrent().then(() => {
      if (history) {
        go('/history/history')
        return
      }
      go('/warehouse-business/move')
    })
  };

  const size = ref('large');
  const useForm = Form.useForm;
  const insideData = reactive({
    data: {
      ID: null,
      code: (!code && !isDetail) ? getCode('YK') : '',
      workAt: null,
      uid: userStore.getUserInfo.ID,
      orderCode: '',
      memo: '',
      goodsList: [],
    },
  });

  const rulesRef = reactive({
    'data.code': [{ required: true, message: '编码不能为空' }],
  });

  // const DateFormat = 'YYYY-MM-DD HH:mm:ss';
  // const workAtRef = ref<Dayjs>();
  // const onValidDateChange = (date: Dayjs | string, dateString: string) => {
  //   insideData.data.workAt = dateString as any;
  // };

  // const userListRef = ref<UserInfoModel[]>();
  watchPostEffect(async () => {
    if (code) {
      getByCode({ code: code }).then((dd) => {
        insideData.data = {...dd}
      });
    }
    // getUserListData().then((dd) => {
    //   userListRef.value = dd
    // });
  });

  const { resetFields, validate, validateInfos } = useForm(insideData, rulesRef, {
    onValidate: (...args) => {},
  });

  const goodsListRef = ref();
  const onSubmit = () => {
    validate()
      .then(async () => {
        let goods = await goodsListRef.value.getGoodsList();
        let { notification } = useMessage();
        if (!goods) {
          return;
        }
        if (goods && goods.length === 0) {
          notification.warning({
            message: '抱歉',
            duration: 6,
            description: '缺少货物，请添加货物！',
          });
          return;
        }

        let reqData = {
          bill: Object.assign({}, insideData.data),
          goodsList: goods,
        };
        if (code && insideData.data.ID) {
          await update(reqData);
        } else {
          await create(reqData);
        }
        closeCurrent().then(() => {
          gotoListPage();
        });
      })
  };
</script>
<style scoped>
  /* :deep().mytable-style .vxe-body--row.row-enable {
    opacity: 0.62;
  }
  :deep().vben-page-wrapper-content {
    margin-bottom: 8px;
  }
  :deep(.vben-page-footer__right) {
    width: 100%;
  } */
</style>